<script setup>
import { ref, watch } from 'vue'

import { initBasicLineChart } from "../util/echarts";
import dayjs from 'dayjs';
import { fetch24HourData} from "../api/weatherAPI";
import { useCityStore } from '../stores/cityStore';
// 引入dayjs日期库
const cityStore=useCityStore();
const hour24 = ref([])

//添加侦听器
watch(
  //[必选]监听的数据源
  ()=>cityStore.location,
  //【必选】回调函数，当数据源有变化时，需要做的事情
  ()=>{
    getData(cityStore.location.id)
  },
  //即时回调，初始状态执行一次回调函数
  { immediate: true}
)
//声明两个变量存放预报时间和温度
const hour24FxTime=ref([])//存放未来24小时的时间
const hour24Temp=ref([])//存放未来24小时的温度
const updataTime=ref([])
// getData(cityStore.location.id)

// function getData() {
//   axios.get('https://devapi.qweather.com/v7/weather/24h', {
//     params: {
//       location: '101270101',
//       key: '0236f091f4fe4114b14154fe3fdd7fae',
//     }
//   })
//     .then(function (response) {
//       console.log(response.data);
//       updataTime.value=dayjs(response.data.updateTime ).format('YYYY年MM月DD日 HH时mm分');
//       hour24.value = response.data.hourly//把响应数据放到24hour中
//       //遍历未来24小时，把fixTime和temp提取出来放到hour24Fxtime和hour24Temp
//       hour24.value.forEach(element => {
//         hour24FxTime.value.push(element.fxTime)
//         hour24Temp.value.push(element.temp)
//       });
//       initercharts(hour24FxTime.value.map((x)=>dayjs(x).format('HH')),hour24Temp.value)
//     })
//     .catch(function (error) {
//       console.log(error);
//     })
//     .finally(function () {
//       // 总是会执行
//     });
// }
//调用axios封装及api模块的函数
// const getData = async()=>{
//   const res = await fetch24HourData()
//   console.log(res)
// }
async function getData(locationID) {
  const res = await fetch24HourData(locationID)
console.log(res)
  updataTime.value=dayjs(res.updateTime ).format('YYYY年MM月DD日 HH时mm分');
      hour24.value = res.hourly//把响应数据放到24hour中
      //遍历未来24小时，把fixTime和temp提取出来放到hour24Fxtime和hour24Temp
      // 初始化未来24小时时间
      hour24FxTime.value=[]
      hour24Temp.value=[]
      hour24.value.forEach(element => {
        hour24FxTime.value.push(element.fxTime)
        hour24Temp.value.push(element.temp)
      });
      initBasicLineChart(chartDom.value,hour24FxTime.value.map((x)=>dayjs(x).format('HH'))
      ,hour24Temp.value)
    };

const chartDom=ref(null)

</script>

<template>
  <!-- {{ hour24 }} -->
  <h3>未来24小时天气预报</h3>
  <div>
    <span>最后获取时间:{{ updataTime }}</span>
  </div>
  <!-- <ul>
    <li v-for="(item, index) in hour24" :key="index">
      {{ index }} - <span>预报时间</span>{{ item.fxTime }} - <span>温度：</span>{{ item.temp }}
    </li>
  </ul> -->
  <!-- 添加图表库的容器 -->
  <div id="main" ref="chartDom">
    <!-- vue3中引入dom元素的方式,第二步 -->

  </div>
</template>

<style scoped>
/* scopez只是用来局部样式 */
#main{
  width: 100%;
  height: 400px;
}
</style>
